import { Pencil, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import type { Transformer } from "@/types";

interface TransformerListProps {
  transformers: Transformer[];
  onEdit: (index: number) => void;
  onRemove: (index: number) => void;
}

export function TransformerList(
  { transformers, onEdit, onRemove }: TransformerListProps,
) {
  // Handle case where transformers might be null or undefined
  if (!transformers || !Array.isArray(transformers)) {
    return (
      <div className="space-y-3">
        <div className="flex items-center justify-center rounded-md border bg-white p-8 text-gray-500">
          No transformers configured
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-3">
      {transformers.map((transformer, index) => {
        // Handle case where individual transformer might be null or undefined
        if (!transformer) {
          return (
            <div
              key={index}
              className="flex items-start justify-between rounded-md border bg-white p-4 transition-all hover:shadow-md animate-slide-in hover:scale-[1.01]"
            >
              <div className="flex-1 space-y-1.5">
                <p className="text-md font-semibold text-gray-800">
                  Invalid Transformer
                </p>
                <p className="text-sm text-gray-500">
                  Transformer data is missing
                </p>
              </div>
              <div className="ml-4 flex flex-shrink-0 items-center gap-2">
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => onEdit(index)}
                  className="transition-all-ease hover:scale-110"
                  disabled
                >
                  <Pencil className="h-4 w-4" />
                </Button>
                <Button
                  variant="destructive"
                  size="icon"
                  onClick={() => onRemove(index)}
                  className="transition-all duration-200 hover:scale-110"
                >
                  <Trash2 className="h-4 w-4 text-current transition-colors duration-200" />
                </Button>
              </div>
            </div>
          );
        }

        // Handle case where transformer.path might be null or undefined
        const transformerPath = transformer.path || "Unnamed Transformer";

        // Handle case where transformer.parameters might be null or undefined
        const options = transformer.options || {};

        // Render parameters as tags in a single line
        const renderParameters = () => {
          if (!options || Object.keys(options).length === 0) {
            return (
              <p className="text-sm text-gray-500">No parameters configured</p>
            );
          }

          return (
            <div className="flex flex-wrap gap-2 max-h-8 overflow-hidden">
              {Object.entries(options).map(([key, value]) => (
                <span
                  key={key}
                  className="inline-flex items-center px-2 py-1 rounded-md bg-gray-100 text-xs font-medium text-gray-700 border"
                >
                  <span className="text-gray-600">{key}:</span>
                  <span className="ml-1 text-gray-800">{String(value)}</span>
                </span>
              ))}
            </div>
          );
        };

        return (
          <div
            key={index}
            className="flex items-start justify-between rounded-md border bg-white p-4 transition-all hover:shadow-md animate-slide-in hover:scale-[1.01]"
          >
            <div className="flex-1 space-y-1.5">
              <p className="text-md font-semibold text-gray-800">
                {transformerPath}
              </p>
              {renderParameters()}
            </div>
            <div className="ml-4 flex flex-shrink-0 items-center gap-2">
              <Button
                variant="ghost"
                size="icon"
                onClick={() => onEdit(index)}
                className="transition-all-ease hover:scale-110"
              >
                <Pencil className="h-4 w-4" />
              </Button>
              <Button
                variant="destructive"
                size="icon"
                onClick={() => onRemove(index)}
                className="transition-all duration-200 hover:scale-110"
              >
                <Trash2 className="h-4 w-4 text-current transition-colors duration-200" />
              </Button>
            </div>
          </div>
        );
      })}
    </div>
  );
}
